<template>
	<view class="">
		<view class="nocar" v-if="!productList.length">
			<image src="../../static/image/mine/discount/no_cart.png" mode=""></image>
			<view class="nocar_wz">您的购物车空空如也</view>
		</view>
		<view class="" v-else>
			<view class="tips">
				<view class="tips_wz">当前已选中{{procuctNum}}件商品</view>
				<view class="tips_wz" @tap="empity">
					<i class="icon">&#xe64c;</i>
					删除商品
				</view>
			</view>
			<!-- <cart-product 
				@deletpro = "deletpro"
				@deletnum = "deletnum"
				@addnum = "addnum"
				:productList="productList">
				</cart-product> -->
			<view class="product" v-for="(item, index) in productList">
				<view class="list" v-for="(items, key) in item">
					<view class="remove" @tap="change_check(items)">
						<image 
						v-if="items.checkFlag"
						src="../../static/image/mine/index/true.png" mode="">
							
						</image>
					</view>
					<view class="pic"><image src="../../static/image/mine/discount/product01.png" mode=""></image></view>
					<view class="info">
						<view class="info_tilte">临潼石榴老树新鲜包邮应季天水果3-10斤</view>
						<view class="desc">品质保障 美味新鲜</view>
						<view class="price">
							<text class="price_now">￥129.00</text>
							<text class="price_line">￥199.00</text>
						</view>
						<view class="add_delet">
							<!-- 	<view class="delet" @tap="todelet(index,key)">
									<i class="icon">&#xe64c;</i>
								</view> -->
							<view class="add">
								<i class="icon" @tap="deletnum(index, key)">&#xe606;</i>
								<text class="num">{{ items.num }}</text>
								<i @tap="addnum(index, key)" class="icon">&#xe600;</i>
							</view>
						</view>
						<!-- <slot @tap="change(index,key)" name="add_delet"></slot> -->
					</view>
				</view>
			</view>
			<!-- 猜你喜欢 -->
			<view class="like">
				<view class="like_one">
					<view class="like_one_line"></view>
					<view class="like_one_title">
						<image src="../../static/image/mine/index/like.png" mode=""></image>
						猜你喜欢	
					</view>
					<view class="like_one_line"></view>
				</view>
				<view class="likeProduct">
					<view class="likeProduct_list" v-for="(item,index) in likeProduct" :key="index">
						<image class="likeProduct_list_pic" src="../../static/image/mine/index/product01.png" mode=""></image>
						<view class="likeProduct_list_info">
							<view class="likeProduct_list_title">
								{{item.title}}
							</view>
							<view class="likeProduct_list_discount">
								<view class="likeProduct_list_discount_l">
									券
								</view>
								 {{item.discount}}
							</view>
							<view class="likeProduct_list_linePrice">
								￥{{item.line_price}}
							</view>
							<view class="likeProduct_list_price">
								￥{{item.price}}
							</view>
							<image class="likeProduct_list_info_add" src="../../static/image/mine/index/add.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view class="paybtn">
				<view class="paybtn_l">
					<view class="allCheck">
						<view class="allCheck_pic" @tap="changeAllcheck">
							<image v-if="allCheck" 
							src="../../static/image/mine/index/true.png" mode=""></image>
						</view>
						全选
					</view>
					<view class="cart_price">合计：￥17.04</view>
				</view>
				<view class="topay">去结算</view>
			</view>
		</view>
	</view>
</template>

<script>
import cartProduct from '@/components/shoppingcart/cartProduct.vue';
export default {
	components: {
		cartProduct
	},
	data() {
		return {
			allCheck : true,
			procuctNum: '',
			likeProduct: [
				{
					pic: '../../static/image/mine/discount/product01.png',
					title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
					price: '129.00',
					discount: '满100元减20元',
					line_price: '199.00',
				},
				{
					pic: '../../static/image/mine/discount/product01.png',
					title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
					price: '129.00',
					discount: '满100元减20元',
					line_price: '199.00',
				},
				{
					pic: '../../static/image/mine/discount/product01.png',
					title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
					price: '129.00',
					discount: '满100元减20元',
					line_price: '199.00',
				}
			],
			productList: [
				[
					{
						pic: '../../static/image/mine/discount/product01.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						discount: '满100元减20元',
						line_price: '199.00',
						num: '1',
						checkFlag : true
					},
					{
						pic: '../../static/image/mine/discount/product01.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '199.00',
						num: '2',
						checkFlag : true
					}
				],
				[
					{
						pic: '../../static/image/mine/discount/product01.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '199.00',
						num: '1',
						checkFlag : true
					}
				]
			]
		};
	},
	mounted() {
		this.judeCart()
	},
	methods: {
		// 判断当前的商品是不是都被选入购物车
		judeCart () {
			var _this = this
			var chc = []
			_this.productList.forEach( (item) => {
				item.forEach ( (items) => {
					chc.push(items.checkFlag)
				})
			})
			console.log(chc);
		// 	const obj =chc.reduce((pre,item) => {
		// 		console.log(pre);
		// 		console.log(item);
		// 		 pre[item] ? pre[item] ++ : pre[item] = 1
		// 		return pre
		// 		},{})
		
			let counts = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);	
			// console.log(counts(chc,true));
			_this.procuctNum = counts(chc,true)
			console.log(chc.indexOf(false));
			if(chc.indexOf(false) == '-1') {
				_this.allCheck = true
			}else {
				_this.allCheck = false	
			}
		},
		// 改变商品的选中状态
		change_check (items) {
			var _this = this
			// _this.productList[index][key].checkFlag = !_this.productList[index][key].checkFlag
			setTimeout(function() {_this.judeCart()}, 10);
			items.checkFlag =!items.checkFlag ;
			// console.log(_this.productList);
		},
		// 改变全选  全不选
		changeAllcheck () {
			this.allCheck = !this.allCheck
			this.productList.forEach( (item) => {
				item.forEach ( (items) => {
					if(this.allCheck) {
						items.checkFlag = true
					}else {
						items.checkFlag = false
					}
				}) 
			})
			this.judeCart()
		},
		// 改变商品数量
		deletnum(index, key) {
			if (this.productList[index][key].num == 1) return false;
			this.productList[index][key].num--;
		},
		addnum(index, key) {
			this.productList[index][key].num++;
		},
		empity() {
			uni.showModal({
				title: '提示',
				content: '您确定要删除已勾选的商品吗？',
				showCancel: true,
				success: res => {
					if (res.confirm) {
						this.productList = [];
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.tips {
	width: 100%;
	height: 70upx;
	background-color: #fffdee;
	padding: 0 15upx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.tips_wz {
		font-size: 24upx;
		color: #999999;
		.icon {
			font-size: 24upx;
			color: #999999;
			margin-right: 8upx;
		}
	}
}
.add_delet {
	position: absolute;
	bottom: 20upx;
	right: 0;
	.delet {
		text-align: right;
		.icon {
			font-size: 28upx;
			color: #999999;
		}
	}
	.add {
		.icon {
			font-size: 28upx;
			color: #f73e2f;
		}
		text {
			font-size: 28upx;
			margin: 0 10upx;
		}
	}
}
.paybtn {
	width: calc(100% - 30upx);
	height: 94upx;
	position: fixed;
	bottom: 100upx;
	left: 50%;
	transform: translate(-50%);
	border-radius: 10upx;
	overflow: hidden;
	display: flex;
	.paybtn_l {
		flex: 1;
		padding-left: 30upx;
		background-color: #333333;
		display: flex;
	}
	.cart_price {
		line-height: 94upx;
		padding-left: 30upx;
		color: #ffffff;
		font-size: 28upx;
		background-color: #333333;
	}
	.topay {
		width: 180upx;
		height: 100%;
		text-align: center;
		line-height: 94upx;
		font-size: 32upx;
		color: #fff;
		background: linear-gradient(to right, #f83e2f 0, #fc5b2f 100%);
	}
	.allCheck{
		display: flex;
		align-items: center;
		font-size: 28upx;
		color: #FFFFFF;
		line-height: 94upx;
		.allCheck_pic {
			width: 36upx;
			height: 36upx;
			border-radius: 50%;
			background-color: #FFFFFF;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10upx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.nocar {
	width: 100%;
	text-align: center;
	image {
		width: 253upx;
		height: 128upx;
		display: block;
		margin: auto;
		margin-top: 300upx;
	}
	.nocar_wz {
		font-size: 28upx;
		color: #999999;
		margin-top: 40upx;
	}
}
.product {
	width: calc(100% - 30upx);
	margin: auto;
	background-color: #ffffff;
	border-radius: 20upx;
	padding: 0 15upx;
	box-sizing: border-box;
	margin-top: 15upx;
}
.list {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.pic {
		width: 160upx;
		height: 160upx;
		// margin-right: 10upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.remove {
		width: 40upx;
		height: 40upx;
		border: 2upx solid #e1e1e1;
		box-sizing: border-box;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		// margin-right: 30upx;
		// margin-right: 10upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.info {
		width: 450upx;
		position: relative;
		padding: 30upx 0;
		box-sizing: border-box;
		border-bottom: 2upx solid #e1e1e1;
		.info_tilte {
			font-size: 28upx;
			color: #333333;
			line-height: 40upx;
			height: 80upx;
		}
		.desc {
			font-size: 24upx;
			color: #999999;
			line-height: 32upx;
		}
		.price {
			margin-top: 10upx;
			.price_now {
				font-size: 28upx;
				color: #f73e2f;
				line-height: 40upx;
			}
			.price_line {
				font-size: 24upx;
				color: #999;
				line-height: 40upx;
			}
		}
		.add_delet {
			position: absolute;
			bottom: 20upx;
			right: 0;
			.delet {
				text-align: right;
				.icon {
					font-size: 28upx;
					color: #999999;
				}
			}
			.add {
				.icon {
					font-size: 28upx;
					color: #999999;
				}
				text {
					font-size: 28upx;
					margin: 0 10upx;
				}
			}
		}
	}
}
.like {
	width: 100%;
	.like_one {
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.like_one_line {
			width: 140upx;
			height: 2upx;
			background-color: #E1E1E1;
		}
		.like_one_title {
			display: flex;
			align-items: center;
			font-size: 28upx;
			color: #333333;
			margin: 0 20upx;
			image {
				width: 34upx;
				height: 34upx;
			}
		}
	}
	.likeProduct {
		width: 100%;
		padding: 0 15upx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.likeProduct_list {
			width: 350upx;
			height: 530upx;
			border-radius: 10upx;
			overflow: hidden;
			background-color: #FFFFFF;
			margin-bottom: 20upx;
			.likeProduct_list_pic {
				width: 350upx;
				height: 350upx;
			}
			.likeProduct_list_info {
				width: 100%;
				box-sizing: border-box;
				padding: 0 20upx;
				position: relative;
			}
			.likeProduct_list_info_add {
				position: absolute;
				width: 40upx;
				height: 40upx;
				bottom: 0;
				right: 20upx;
			}
			.likeProduct_list_title {
				font-size: 28upx;
				color: #333333;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.likeProduct_list_discount {
				height: 32upx;
				width: 200upx;
				border-radius: 4rpx;
				overflow: hidden;
				display: flex;
				background-color: #f39981;
				font-size: 24upx;
				line-height: 32upx;
				color: #FFFFFF;
				margin: 8upx 0;
				.likeProduct_list_discount_l {
					width: 32upx;
					height: 32upx;
					background-color: #f73e2f;
					text-align: center;
					line-height: 32upx;
					font-size: 24upx;
					color: #FFFFFF;
					margin-right: 6upx;
				}
			}
			.likeProduct_list_linePrice {
				font-size: 24upx;
				color: #999999;
				text-decoration: line-through;
				line-height: 40upx;
			}
			.likeProduct_list_price {
				font-size: 28upx;
				color: #f73e2f;
			}
		}
	}
}
.list:last-child .info {
	border-bottom: none;
}
</style>
